Как повысить эффективность стека MERN с точки зрения скорости?

#node.js #reactjs #mongodb #performance #fetch

#node.js #reactjs #mongodb #Производительность #выборка

Вопрос:

У меня есть приложение стека MERN с несколькими маршрутами в App.js файл и в каждом маршруте мне нужно извлекать данные из Mongo и визуализировать. Есть несколько коллекций, которые мне нужны во всех этих маршрутах, но поскольку это разные маршруты, всякий раз, когда они открываются, он повторно извлекает все данные, упомянутые в его componentdidmount.

Есть ли какой-либо способ сделать это более эффективным и уменьшить объем данных, извлекаемых из mongo, потому что, честно говоря, mongo работает очень медленно, и я не могу позволить себе такую медленную загрузку на каждом отдельном маршруте.

У меня есть маршруты в моем App.js вот так:

 <Route path="/" exact component={Home} />
<Route path="/category/:slug" exact component={Category} />
<Route path="/product/:slug" exact component={SingleProduct} />
  

Сначала я подумал о выборке данных в App.js и передавать его через реквизиты этим компонентам маршрута (я нашел способ сделать это в Google). Таким образом, мне не нужно было бы снова и снова извлекать данные, которые являются общими для этих компонентов. Но при каждом изменении маршрута страница будет перемонтироваться в основном и app.js будет повторная выборка всех данных, так что это будет почти то же самое, что и раньше.

Есть ли какой-либо способ использовать эти компоненты в качестве параметров url? Пример:

 localhost:3000?currentpage=home
localhost:3000?currentpage=categoryamp;slug=xyz
localhost:3000?currentpage=singleproductamp;slug=xyz
  

Если да, то как я могу добиться этого app.js ? В противном случае, как я могу сделать свое приложение более эффективным с точки зрения скорости при получении данных из mongo.

Ответ №1:

Вы можете выполнить то, что вам нужно, используя render вместо component в маршруте. Прочитайте документацию ниже, чтобы лучше понять. При рендеринге ваш компонент монтируется только один раз.

https://reactrouter.com/web/api/Route/render-func