Data fetching code along workshop
We’ve explained that Next.js has two forms of pre-rendering: Static Generation and Server-side Rendering.Now, we’ll talk in depths about data fetching strategies for each case.
We'll code the three unique Next.js functions you can use to fetch data for pre-rendering:
- getStaticProps (Static Generation): Fetch data at build time.
- getStaticPaths (Static Generation): Specify dynamic routes to pre-render based on data.
- Incremental Static Regeneration
- getServerSideProps (Server-side Rendering): Fetch data on each request .
Now code time
We’d like to create a note App, to view our notes, add new note, and view specific note. We'll build our pages with nextJs two forms of pre-rendering, First with static generation then with serverSideProps, While we're working in the development mode we'll not notice the difference. So after all is done try to build your app, add new note, check notes at the home page, What can you notice?!
- Clone this repo
- check files
- pgcli then \i path of createDB.sql
- pgcli DB_URL from .env then \i path of build.sql
- cd todo && npm i
- npm run dev
- start from pages/index.js , You can notice that notes are static data try to fetch it by following comments,
- When you finished go to pages/[id] , also follow the comments.