React сервер рендеринга - PullRequest
Новая
       10

React сервер рендеринга

0 голосов
/ 10 мая 2018

Я хочу создать приложение реакции на стороне сервера, и у меня есть несколько сомнений:

1) Когда вы используете renderToString из Reaction-DOM / Server, вам также нужно использовать веб-пакет для создания проекта, или это делает работу?

2) нужно ли добавить 

    <script src="/bundle.js"></script>

в HTML? если так, то почему? Разве renderToString не передает этот файл в виде строки? спасибо

Ответы [ 2 ]

0 голосов
/ 15 февраля 2019

Добавление к ответу @ Брендана (он правильно упоминает об использовании веб-пакета):

  • Основная причина SSR - возможность отправлять Html вместо чистого JS для SEO и ускорения загрузки. Это не является чем-то обязательным, используйте его с осторожностью, возможно, вам не нужен SSR.
  • renderToString отправляет только HTML-контент, отображаемый на сервере Node, а не в вашем браузере. Поэтому по умолчанию он не знает об устройстве, на котором оно отображается, о персонализации (например, файлы cookie и т. Д.), Размере экрана и т. Д., А также объектах документа на Узле не существует. Единственное преимущество, которое вы получаете, - это статический HTML.
  • bundle.js - это ловушка JS, которая будет отображать содержимое как SPA (одностраничное приложение) независимо от предоставленного статического HTML. Это то, что делает ваш сайт динамичным. Здесь вы можете делать такие вещи, как flex wrap, что делает сайт отзывчивым. Это невозможно (не из коробки) в SSR.

Если вы только начинаете с SSR, эта статья может помочь: https://medium.com/@gagan_goku/react-and-server-side-rendering-ssr-444d8c48abfc. Имейте простой взлом, который вы можете попробовать сделать жизнь проще.

0 голосов
/ 12 мая 2018

  1. Эти две вещи не связаны. Все, что renderToString делает, это получает то, что ваш компонент React отображает, в виде строки HTML (вместо создания объектов, представляющих компоненты и попытки их визуализации в DOM, как это делается на клиенте). Возвращает эту строку. React обычно используется только для визуализации элементов внутри <body>, поэтому обычно вы представляете содержимое вашего корневого компонента React в виде строки, а затем вставляете эту строку в какой-то шаблон, включающий ваш тип документа, <html> , <head> и <body> элементов. Затем ваш сервер должен вернуть эту строку текста, которая составляет HTML-документ.

  2. Необходимость использования веб-пакета и необходимость включения приложения JS в качестве <script> в HTML-код, отправляемый клиенту, также не определены. Обычно да, вам нужно сделать оба.

    • Вам необходимо использовать веб-пакет (или другой сборщик модулей и / или транспортер), если вы следуете стандартным методам разработки React (например, используя синтаксис ES6, используя систему импорта модулей commonJS или es6). (Теоретически вы могли бы написать один файл JS со всем вашим кодом React, не используя синтаксис JSX, в ES5-совместимом коде, который не нужно было бы собирать или переносить, но это, без сомнения, довольно редко.) Это просто создание JS-код, понятный браузерам.
    • Вам необходимо включить приложение React на стороне клиента, потому что при рендеринге на сервере вы просто создаете строку HTML. Как и любой HTML, он будет статическим без JS для обработки взаимодействий. Таким образом, вы загружаете клиентскую сборку вашего JS-приложения в браузер, и по мере ее выполнения клиентская библиотека React определяет, как должен выглядеть DOM, проверяет DOM при его визуализации с сервера, и, если они совпадают, ничего не нужно перерисовывать. (Если они не совпадают, React на стороне клиента выполнит повторную визуализацию вашего приложения, что сводит на нет преимущества производительности при рендеринге на стороне сервера, поэтому важно, чтобы ваше приложение отображало одинаково в обеих средах.) Вам нужен клиент приложение на стороне клиента загружается для связывания и запуска обработчиков событий, обработки маршрутизации страниц и т. д. - как приложение JS на стороне клиента, оно работает как любое другое приложение JS на стороне клиента, независимо от того, было ли оно изначально отображено на сервере или нет.
...