Cheatsheet Next
===

`getInitialProps` est une fonction statique qui permet de remplir les props au démarrage d'une page Next.

Cette page peut être appelée en Client Side Rendering (CSR) à la suite d'un clic sur un élément entouré par la balise `<Link>` ou programmatiquement par `Router.push`. Dans ce cas, on parle de CSR.
Cette page peut aussi être appelée par un refresh du navigateur, dans ce cas on parle de Server Side Rendering (SSR).

Le hook React `useEffect`, permet de faire des traitements asynchrone, après que le composant React ait fait son premier `render`. Ce hook est utilisé couramment pour faire des appels Ajax, qui en retour modifie le state du composant et lance donc un nouveau `render`.

`useEffect` est donc lancé exclusivement côté client.

Les différences entre `getInitialProps` et `useEffect`:

- `getInitialProps` est lancé en mode SSR ou CSR. Pour savoir dans quel mode on est, utiliser l'objet `ctx` donné à `getInitialProps`. Si `ctx.req` !== null, alors on est en SSR.
- `useEffect` est exclusivement lancé en CSR.
- pour récupérer des données liées à des props, seul `useEffect` peut être utilisé. En effet, `getInitialProps` est une fonction statique, et est lancée avant même le 1er `render`.
- Si `getInitialProps` est absent, Next.js fait une `Automatic Static Optimization`, i.e. la page sera buildée en tant que simple page HTML

Pour des raisons de performances, il est donc conseillé de ne pas ajouter de prime abord `getInitialProps`. Cela est possible pour des pages qui n'ont pas besoin de SEO, qui sont des pages seulement visibles après authentification, etc.

## Customisation avec _app et _document

`_app` permet d'encapsuler chacun des composants page de l'application. Cela permet d'ajouter des comportements automatiques à chacune des pages.

- Persisting layout between page changes
- Keeping state when navigating pages
- Custom error handling using componentDidCatch
- Inject additional data into pages
- Add global CSS