feat: add rendering-methods slides

docs/markdown/08-rendering-methods/01-intro.md

@@ -0,0 +1,11 @@
+<!-- .slide: class="two-column with-code " -->
+
+# Rendering methods
+
+Next.js combines various rendering strategies :
+
+- dynamic rendering (classic SSR)
+- static rendering
+- incremental static generation
+- streaming
+- bonus : partial pre-rendering

docs/markdown/08-rendering-methods/10-ssr.md

@@ -0,0 +1,12 @@
+<!-- .slide: class="two-column with-code " -->
+
+<style>
+  .ssr-workflow-schema-01 {
+    width: 1200px;
+    height: auto;
+  }
+</style>
+
+# Dynamic rendering
+
+<img src="./assets/images/08-rendering/ssr-workflow-schema.png" class="ssr-workflow-schema-01" />

docs/markdown/08-rendering-methods/11-pro-cons.md

@@ -0,0 +1,21 @@
+<!-- .slide: class="two-column with-code " -->
+
+# Dynamic rendering
+
+**Pros**
+
+- Security
+- Performance
+  - caching
+  - reducing JavaScript
+  - Fast First Contentful Paint
+- SEO
+
+##--##
+
+<br/> <br/> <br/>
+
+**Cons**
+
+- Cost
+- Scalability

docs/markdown/08-rendering-methods/20-static-rendering.md

@@ -0,0 +1,14 @@
+<!-- .slide: class="two-column with-code " -->
+
+<style>
+  .static-rendering-20 {
+    width: 1400px;
+    height: auto;
+  }
+</style>
+
+# Static rendering
+
+_This is the default behavior. If all conditions are set, Next will always prioritize this rendering method_
+
+<img src="./assets/images/08-rendering/static-rendering.png" class="static-rendering-20" />

docs/markdown/08-rendering-methods/21-static-rendering-schema.md

@@ -0,0 +1,25 @@
+<!-- .slide: class="two-column with-code " -->
+
+<style>
+  .static-rendering-21 {
+    width: 800px;
+    height: auto;
+  }
+</style>
+
+# Static rendering
+
+## Conditions
+
+- The route data is not personalized to the user (no dynamic function)
+  - cookies
+  - headers
+  - searchParams props
+- The route can be known at build time
+- The route data is cached (data cache)
+
+##--##
+
+<br/> <br/> <br/>
+
+<img src="./assets/images/08-rendering/static-rendering-output.png" class="static-rendering-21" />

docs/markdown/08-rendering-methods/22-static-rendering-config.md

@@ -0,0 +1,12 @@
+<!-- .slide: class="two-column with-code " -->
+
+# Static rendering
+
+## Configuration
+
+Static rendering can be configured using [route segment configuration](https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config)
+
+```js
+export const dynamic = 'auto' | 'force-dynamic' | 'error' | 'force-static';
+export const revalidate = false | number;
+```

docs/markdown/08-rendering-methods/30-incremental.md

@@ -0,0 +1,12 @@
+<!-- .slide: class="two-column with-code " -->
+
+# Incremental Static Rendering
+
+By default, dynamic routes (_/[id]/page.tsx_) can't be known at build time <br/>
+But there is a way to generate them :
+
+```js
+export const generateStaticParams = async () => {
+  return [];
+};
+```

docs/markdown/08-rendering-methods/31-incremental-schema.md

@@ -0,0 +1,18 @@
+<!-- .slide: class="two-column with-code " -->
+
+<style>
+  .incremental-31 {
+    width: 1400px;
+    height: auto;
+  }
+</style>
+
+# Incremental Static Rendering
+
+```js
+export const generateStaticParams = async () => {
+  return [{ id: 1 }, { id: 2 }, { id: 3 }];
+};
+```
+
+<img src="./assets/images/08-rendering/incremental.png" class="incremental-31" />

docs/markdown/08-rendering-methods/32-incremental-example.md

@@ -0,0 +1,41 @@
+<!-- .slide: class="two-column with-code " -->
+
+# Incremental Static Rendering
+
+## Examples
+
+Single dynamic segment
+
+```js
+// /app/employee/[id]/page.tsx
+export const generateStaticParams = () => {
+  return [{ id: '1' }, { id: '2' }, { id: '3' }];
+};
+
+// Will generate :
+// - /employee/1
+// - /employee/2
+// - /employee/3
+```
+
+##--##
+
+<br/> <br/>
+
+Multiple dynamic segment
+
+```js
+// /app/employee/[category]/[id]/page.tsx
+export const generateStaticParams = () => {
+  return [
+    { id: '1', category: 'a' },
+    { id: '2', category: 'b' },
+    { id: '3', category: 'c' },
+  ];
+};
+
+// Will generate :
+// - /employee/a/1
+// - /employee/b/2
+// - /employee/c/3
+```

docs/markdown/08-rendering-methods/33-incremental-example2.md

@@ -0,0 +1,40 @@
+<!-- .slide: class="two-column with-code " -->
+
+# Incremental Static Rendering
+
+## Examples
+
+Catch-all dynamic segment
+
+```js
+// /app/employee/[...params]/page.tsx
+export const generateStaticParams = () => {
+  return [{ params: ['a', '1'] }, { params: ['b', '2'] }, { params: ['c', '3'] }];
+};
+
+// Will generate :
+// - /employee/a/1
+// - /employee/b/2
+// - /employee/c/3
+```
+
+##--##
+
+<br/> <br/>
+
+Parent / Children page segments :
+
+```js
+// /app/employee/[category]/page.tsx
+export const generateStaticParams = () => {
+  return [{ category: 'a' }, { category: 'b' }, { category: 'c' }];
+};
+```
+
+```js
+// /app/employee/[category]/[id]/page.tsx
+export const generateStaticParams = async ({ params: { category } }) => {
+  const employees = await getEmployees(category);
+  return employees.map((employee) => ({ id: employee.id }));
+};
+```

docs/markdown/08-rendering-methods/34-incremental-runtime.md

@@ -0,0 +1,20 @@
+<!-- .slide: class="two-column with-code title-margin-sm " -->
+
+<style>
+  .incremental-34 {
+    width: 1350px;
+    height: auto;
+  }
+</style>
+
+# Incremental Static Rendering
+
+What if a page params are not known at build time ?
+
+<img src="./assets/images/08-rendering/incremental-runtime.png" class="incremental-34" />
+
+This behavior can be disabled definig dynamicParams :
+
+```js
+export const dynamicParams = false;
+```

docs/markdown/08-rendering-methods/40-lab.md

@@ -0,0 +1,11 @@
+<!-- .slide: class="exercice" -->
+
+# Rendering methods
+
+## Lab
+
+<small>
+
+TODO
+
+</small>

docs/markdown/08-rendering-methods/50-streaming.md

@@ -0,0 +1,14 @@
+<!-- .slide: class="two-column with-code " -->
+
+<style>
+  .ssr-issue-50 {
+    width: 1450px;
+    height: auto;
+  }
+</style>
+
+# Streaming
+
+## The problem with classic SSR (or dynamic rendering)
+
+<img src="./assets/images/08-rendering/ssr-issue.png" class="ssr-issue-50" />

docs/markdown/08-rendering-methods/51-solution.md

@@ -0,0 +1,14 @@
+<!-- .slide: class="two-column with-code " -->
+
+<style>
+  .ssr-solution-51 {
+    width: 1500px;
+    height: auto;
+  }
+</style>
+
+# Streaming
+
+## React solution
+
+<img src="./assets/images/08-rendering/ssr-solution.png" class="ssr-solution-51" />

docs/markdown/08-rendering-methods/52-streaming-next.md

@@ -0,0 +1,10 @@
+<!-- .slide: class="two-column with-code " -->
+
+# Streaming
+
+## Next.js implementation
+
+Two possibilities :
+
+- using router file convention : **loading.tsx**
+- using **<Suspense />** directly

docs/markdown/08-rendering-methods/53-streaming-loading.md

@@ -0,0 +1,30 @@
+<!-- .slide: class="two-column with-code " -->
+
+<style>
+  .loading-53 {
+    width: 450px;
+    height: auto;
+  }
+</style>
+
+# Streaming
+
+## loading.tsx
+
+Convention : <br/>
+Add a **loading.tsx** file and export a component next to the segment you want to stream <br/><br/>
+This component will be displayed while the Promises of the child components are pending :
+
+```jsx
+const Loading = () => {
+  return <p>Loading...</p>;
+};
+
+export default Loading;
+```
+
+##--##
+
+<br/> <br/> <br/>
+
+<img src="./assets/images/08-rendering/loading.png" class="loading-53" />

docs/markdown/08-rendering-methods/54-streaming-parallel.md

@@ -0,0 +1,16 @@
+<!-- .slide: class="two-column with-code " -->
+
+<style>
+  .loading-parallel-54 {
+    width: 1300px;
+    height: auto;
+  }
+</style>
+
+# Streaming
+
+## loading.tsx
+
+This is also very interesting with parallel routing :
+
+<img src="./assets/images/08-rendering/loading-parallel.png" class="loading-parallel-54" />

docs/markdown/08-rendering-methods/60-suspense.md

@@ -0,0 +1,25 @@
+<!-- .slide: class="two-column with-code " -->
+
+# Streaming
+
+## Suspense
+
+You can also use React **\<Suspense /\>** API Directly :
+
+```jsx
+import { Suspense } from 'react';
+import { Employees, Expenses } from './Components';
+
+export default function Posts() {
+  return (
+    <section>
+      <Suspense fallback={<p>Loading employees...</p>}>
+        <Employees />
+      </Suspense>
+      <Suspense fallback={<p>Loading expenses...</p>}>
+        <Expenses />
+      </Suspense>
+    </section>
+  );
+}
+```

docs/markdown/08-rendering-methods/70-lab.md

@@ -0,0 +1,11 @@
+<!-- .slide: class="exercice" -->
+
+# Streaming
+
+## Lab
+
+<small>
+
+TODO
+
+</small>