Différences

Ci-dessous, les différences entre deux révisions de la page.

--- web:framework:nextjs [2023/03/22 03:33] – créée jcheron
+++ web:framework:nextjs [2024/04/08 08:56] (Version actuelle) – [Routage] jcheron
@@ Ligne 18: / Ligne 18: @@
 <sxh bash;gutter:false>
 cd my-next-app
-npx run dev
+npm run dev
+</sxh>
+==== Routage ====
+Avec App router, le routage est basé sur la structure des dossiers à partir de **app**.
+  * Chaque dossier représente un segment de route
+  * Les routes se concrétisent et sont accessibles à partir du moment où elles contiennent le fichier **page.jsx/tsx**
+<html><div class="imageB"></html>{{:web:framework:pasted:20240408-083105.png?600}}<html></div></html>
+=== Layout ===
+**app/layout.jsx** correspond au main layout, et permet de définir la structure de base des pages.
+==== Recupération de données ====
+=== Côté serveur ===
+== Server Side Rendering ==
+<WRAP info round>
+Sollicité côté serveur à chaque requête.
+</WRAP>
+<sxh javascript>
+export default function Home({data}) {
+  return (
+    <>
+        <UIList objects={data}/>
+    </ >
+  )
+}
+export async function getServerSideProps() {
+    const res = await fetch(API_URL)
+    const data = await res.json()
+    return {
+        props: {
+            data
+        }
+    }
+}
+</sxh>
+== Static Site Generation ==
+<sxh javascript>
+export default function Home({data}) {
+  return (
+    <>
+        <UIList objects={data}/>
+    </ >
+  )
+}
+export async function getStaticProps() {
+    const res = await fetch(API_URL)
+    const data = await res.json()
+    return {
+        props: {
+            data
+        }
+    }
+}
 </sxh>