0

Is it possible to generate a static HTML page from a react code and REST API as a trigger? I will provide a use case to describe my issue.

Assuming I'm building a simple notes SPA react app using creat-react-app. The UI allows the user to view the list of all notes, add, edit and delete a note. Clicking on a note will link to that note page which displays more information. The CRUD operations are done with a REST API hosted on a node js server that uses MongoDB as a database.

This notes website is used by a classroom- one teacher has the privilege for CRUD operations while all the students are completely passive and can just view (read) the data. From that perspective, it is obvious that the website the students use could be a completely different react project, and specifically, one static website for the notes list and one for each note- since it only fetches data using the REST API and displays it in a <NoteListItem /> and <NotePage /> react components that are the same for each note.

The static page that displays the entire list could hold a div that fetches the list dynamically, but when clicking on a note the static website of this note will be displayed. When the teacher adds a new note, an API call will be made to my-host/api/addNote and at the end of that controller, I wish to add a function generateStaticPage(noteId) that will generate that note static page.

This is the basic idea, which implies the use of some known concepts in SSR/react-static where you can define a dynamic scope, static, the template, etc.

A possible solution is a library like react-static, but how can I build a page right after I add a note? Is there any library that can help me achieve this?

RanST
  • 404
  • 2
  • 6
  • 20
  • sure you can use SSR for this. why though? why not just load notes via `fetch` on the client? – azium Oct 26 '20 at 18:59
  • This of course was a very simple example. I think SSR will be my solution, but I am curious if it is possible to create an actual static page on demand – RanST Oct 26 '20 at 19:04
  • it is indeed possible. the same function that is used to generate static pages in something like react-static or gatsby can be called on demand. it doesn't sound like a great solution to me. a more traditional `JSON -> database -> data -> ssr` solution seems like a better fit for dynamically created content. yknow how all blog websites work basically – azium Oct 26 '20 at 19:12
  • In that case I would like to ask another question: as mentioned the student can only view data while the teacher has more options. Let's assume that `` component renders with pen icon if state.user is set to admin and without when state.user is set to visitor. When using SSR should I design the app in the same way that each compnent renders more functionality based on that user type state, or is it better to make the admin and visitor 2 different apps- admin is a normal create-react-app and visitor app supports SSR? – RanST Oct 26 '20 at 19:24
  • There's no right answer to that question, it depends on the requirements of your application. From what you've said so far I still see no use case for SSR or static pages to begin with – azium Oct 26 '20 at 19:28
  • The actual website I'm creating displays a masonry layout gallery, sortable and selectable for the admin. For the user it it just viewable. Each image in the masonry is an artwork, and by clicking on it you will get to that full artwork page (which is editable for admin). The reason for SSR is SEO optimization of the artwork page, and different meta tag for social share with that artwork image and title. – RanST Oct 26 '20 at 19:37
  • Gatsby has been talked about however I would like to point out that last I heard NextJS was providing services for static site generator as well , which i think would be preferable in longer terms as well.\ – Ankush Verma Oct 26 '20 at 19:54

0 Answers0