Как сгенерировать статическую html-страницу из кода react на сервере nodejs с вызовом REST API в качестве триггера?

#node.js #reactjs #server-side-rendering #react-static

#node.js #reactjs #рендеринг на стороне сервера #реакция-статическая

Вопрос:

Возможно ли сгенерировать статическую HTML-страницу из кода react и REST API в качестве триггера? Я приведу пример использования, чтобы описать мою проблему.

Предполагая, что я создаю простое приложение notes SPA react с помощью creat-react-app. Пользовательский интерфейс позволяет пользователю просматривать список всех заметок, добавлять, редактировать и удалять заметки. Нажатие на заметку приведет к ссылке на страницу заметки, на которой отображается дополнительная информация. Операции CRUD выполняются с помощью REST API, размещенного на сервере node js, который использует MongoDB в качестве базы данных.

Этот веб-сайт notes используется классом — один учитель имеет привилегию для операций CRUD, в то время как все учащиеся полностью пассивны и могут просто просматривать (читать) данные. С этой точки зрения очевидно, что веб-сайт, который используют студенты, может быть совершенно другим проектом react, и, в частности, один статический веб-сайт для списка заметок и один для каждой заметки, поскольку он извлекает данные только с помощью REST API и отображает их в компонентах a <NoteListItem /> и <NotePage /> react, которые одинаковы для каждогопримечание.

Статическая страница, на которой отображается весь список, может содержать div, который извлекает список динамически, но при нажатии на заметку будет отображаться статический веб-сайт этой заметки. Когда учитель добавляет новую заметку, вызов API будет выполнен в my-host / api / addNote, и в конце этого контроллера я хочу добавить функцию generateStaticPage(noteId) , которая будет генерировать статическую страницу заметки.

Это основная идея, которая подразумевает использование некоторых известных концепций в SSR / react-static, где вы можете определить динамическую область видимости, статику, шаблон и т.д.

Возможным решением является библиотека, подобная react-static, но как я могу создать страницу сразу после добавления заметки? Есть ли какая-либо библиотека, которая может помочь мне достичь этого?

Комментарии:

1. конечно, вы можете использовать SSR для этого. хотя почему? почему бы просто не загрузить заметки через fetch на клиенте?

2. Это, конечно, был очень простой пример. Я думаю, что SSR будет моим решением, но мне любопытно, возможно ли создать фактическую статическую страницу по требованию

3. это действительно возможно. та же функция, которая используется для создания статических страниц в чем-то вроде react-static или gatsby, может быть вызвана по требованию. для меня это не похоже на отличное решение. более традиционное JSON -> database -> data -> ssr решение кажется более подходящим для динамически создаваемого контента. знаете, как в основном работают все сайты блогов

4. В этом случае я хотел бы задать еще один вопрос: как уже упоминалось, учащийся может просматривать только данные, в то время как у преподавателя больше возможностей. Предположим, что <NoteListItem /> компонент отображается со значком пера, если для state.user установлено значение admin, и без него, когда для state.user установлено значение visitor. При использовании SSR должен ли я разрабатывать приложение таким же образом, чтобы каждый компонент предоставлял больше функциональности на основе состояния этого типа пользователя, или лучше сделать admin и visitor 2 разными приложениями — admin — это обычное приложение для создания приложений, реагирующих на запросы, а приложение для посетителей поддерживает SSR?

5. На этот вопрос нет правильного ответа, это зависит от требований вашего приложения. Из того, что вы сказали до сих пор, я по-прежнему не вижу вариантов использования SSR или статических страниц для начала