From 65beb40111545398ef1e7a7fcba61536b90b9cee Mon Sep 17 00:00:00 2001 From: Daniel Heras Quesada Date: Wed, 17 Jan 2024 13:43:46 +0100 Subject: [PATCH] final notes --- presentation_notes.md | 43 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 43 insertions(+) create mode 100644 presentation_notes.md diff --git a/presentation_notes.md b/presentation_notes.md new file mode 100644 index 0000000..d395b8b --- /dev/null +++ b/presentation_notes.md @@ -0,0 +1,43 @@ +## Next + +- Es mas opinionado, es un arquetipo + - Facilita enrutado, usuarios, etc +- Usado en la empresa como arquetipo +- Objetivo de uso es grandes proyectos JS +- Beneficio por renderizar en servidor + - En inditex sale siempre como solución + - Cuidado, hay que saber usarlo + +## Benefits + +- Fetch data directly on the server: performance and load benefits. +- Security (API keys and tokens) +- Caching: results can be cached to improve performance between users. +- Bundle size: (send to user) will be reduced as part of the application will reside in the + server. +- SEO: because the pages will be rendered the search engine bots will make good + use of it. +- Streaming: to split the rendering into chunks and stream them as they become + ready. + +### Process of rendering + +The rendering works is split into chunks: + +- By individual route segments +- By React [Suspense boundaries] (react way of having a fallback while a + components has finished loading) + +Each chunk is rendered in the server, then, on the client: + +1. The HTML is used to immediately show fast preview. +2. The server components rendered are inserted to update the DOM (components + rendered in server with placeholders for client components and props). +3. `JS` instructions are used to [hydrate?](https://react.dev/reference/react-dom/client/hydrateRoot) Client Components and make the + application interactive. + +### Strategies + +- Static rendering (default) -> Good for static pages: Rendered in build time or in the background after data revalidation +- Dynamic rendering: rendered per user request, Next uses this type of rendering automatically when discovers a dynamic function (`cookies()`, `headers()`, `userSearchParams()`). +- Streaming: work is split into chunks and streamed as they become ready so the load is progressive.