Мне нравится использовать реагирующий SSR вместо 'getInitialProps' из 'next. js', но я не знаю, как использовать 'ReactDOMServer.renderToNodeStream' - PullRequest
0 голосов
/ 19 апреля 2020

Для улучшения TTFB (время до первого байта) PageSpeed ​​Insights предлагает использовать ReactDOMServer.renderToNodeStream(), но я не знаю, как это реализовать. Я прочитал статью rendertonodestream , но не знаю, как ее использовать. Кроме того, я прочитал dev.to статью , но в моем следующем приложении. js нет файла webpack.config. js. Если я не могу использовать реагировать renderToNodeStream с Next. js, как я могу покрыть эффект renderToNodeStream в Next. js?

1 Ответ

1 голос
/ 27 апреля 2020

renderToNodeStrem () Эта функция возвращает читаемый поток. С помощью этой функции мы по-прежнему получаем запросы от браузера, мы делаем наши первоначальные запросы API, затем мы создаем небольшой фрагмент нашего реагирующего приложения, поэтому мы пытаемся отобразить приложение. Но мы просто визуализируем его минимум как первый компонент, первый бит HTML. В тот момент, когда мы получаем первый маленький кусочек HTML, мы отправляем этот фрагмент в браузер. Затем на сервере мы собрали следующий маленький фрагмент нашего HTML. Затем мы берем этот крошечный фрагмент и отправляем его в браузер, а затем повторяем один и тот же процесс много раз. Таким образом, с помощью этой функции мы собираем крошечные кусочки нашего html документа и отправляем их в браузер пользователя.

TTFB: время до первого укуса Это число, которое нас действительно волнует, когда речь заходит о поисковой оптимизации. Время, которое требуется нашему серверу, чтобы собрать начальный бит HTML и отправить ответ обратно в браузер. Он очень широко используется Google и другими поисковыми системами для оценки эффективности нашей страницы. Это очень мало по длительности с renderToNodeStream (), потому что мы строим чуть-чуть HTML и отправляем его.

если вы начнете рендерить свое приложение с помощью nodeStream, а затем обнаружите компонент, который нужно перенаправить, вы не сможете выполнить перенаправление. Потому что, как только вы начнете передавать весь этот контент из nodeStream в объект res, он мгновенно запускает ответ и отправляет его обратно пользователю. Представьте, что пользователи приходят со страницей, которая должна быть авторизована, но это не так, вы должны перенаправить пользователя с изменением кода состояния, но вы не можете изменить код состояния.

Если вы хотите использовать renderToNodeStream, вам нужно изменить всю архитектуру приложения. вместо следующей маршрутизации вы должны использовать реактив-роутер dom. Для реакции на стороне сервера вы должны использовать StaticRouter, который передает контекстную поддержку всем компонентам. Это похоже на то, что getInitialProps «контекстный» объект. Если вы собираетесь использовать реагирующий маршрутизатор dom, то вам нужно найти все компоненты и решить, какие асинхронные операции c должны быть выполнены перед отправкой объекта ответа. Вы должны сделать это вручную.

Технически вы не можете использовать реагировать renderToNodeStream со следующим. js. Вместо этого вам нужно настроить веб-пакет, построить свой собственный сервер, скорее всего, express сервер и реализовать все самостоятельно.

Далее. js популярен, потому что есть много работы для завершения на стороне сервера рендеринг. Однако на данный момент next. js не поддерживает renderToNodeStream. но это уже в пути.

...