Next.js App Router Course - Starter

This is the starter template for the Next.js App Router Course. It contains the starting code for the dashboard application.

For more information, see the course curriculum on the Next.js Website.

##To recap, you've done a few things to optimize data fetching in your application, you've:

• Created a database in the same region as your application code to reduce latency between your server and database.
• Fetched data on the server with React Server Components. This allows you to keep expensive data fetches and logic on the server, reduces the client-side JavaScript bundle, and prevents your database secrets from being exposed to the client.
• Used SQL to only fetch the data you needed, reducing the amount of data transferred for each request and the amount of JavaScript needed to transform the data in-memory.
• Parallelize data fetching with JavaScript - where it made sense to do so.
• Implemented Streaming to prevent slow data requests from blocking your whole page, and to allow the user to start interacting with the UI without waiting for everything to load.
• Move data fetching down to the components that need it, thus isolating which parts of your routes should be dynamic in preparation for Partial Prerendering.

tech stack

• Auth.js
• tailwindcss
• bcrypt
• clsx
• zod

references

• Start building with Next.js

• Docs

key references

for framework

• Routing
• How Routing and Navigation Works
• Streaming with Suspense
• How are Server Components rendered?
• server rendering strategies
• How are Client Components Rendered?
• Caching in Next.js

for API feature

routing

• Parallel Routes

• Intercepting Routes

• Route Handlers

• Middleware

Data fetching

• Fetching Data on the Server with fetch

• Fetching Data on the Client with Route Handlers

• Forms and Mutations

Rendering

• Route Segment Config
• Keeping Server-only Code out of the Client Environment
• Using Third-party Packages and Providers
• Unsupported Pattern: Importing Server Components into Client Components
• Supported Pattern: Passing Server Components to Client Components as Props

next.js framework

Q&A

• what is Route Handlers?

  Route Handlers allow you to create custom request handlers for a given route using the Web Request and Response APIs. This is actually the restful API. you can create a directory named with resource name in which putting the route.js|ts file that define handlers with Http methods like GET, POST, PUT, PATCH, DELETE, HEAD, and OPTIONS. All of them have the same route path, but different Http methods.

• what is the Middleware?

  it's same with the Middleware of koa. as if the interceptor of request which is kind of AOP.

• what templates is?

  Templates are similar to layouts in that they wrap each child layout or page. Unlike layouts that persist across routes and maintain state, templates create a new instance for each of their children on navigation. This means that when a user navigates between routes that share a template, a new instance of the component is mounted, DOM elements are recreated, state is not preserved, and effects are re-synchronized. Templates

• what is "use client"?

  This directive refers to as this component is kind of client component.

• If there is multiple component like table in invoices which query data, how to send request? is there an API like fetch?

  No need to multiple fetches for multiple datas to the same one page. It seems like that all queries have been collected together on a page, a page is corresponding to a route, so on client, we just need to put parameters for all queries to the end of URL. On server, get all parameters and render the page with puting in them. So only one fetch is enough.

• what's the Next.js cache layer? (need to research further)

  The cache is to cache the result of API, it's capable to determine if static rendering or dynamic rendering. And also the cache has its original funcionality that's improving performance of quering data.

• what is the Client-side Router Cache?

  refer to Router Cache

• what is React cache function?

  refer to React Cache API

• what are Edge and Node.js Runtimes? Edge and Node.js Runtimes

  Caveats

  • React will invalidate the cache for all memoized functions for each server request.
  • Each call to cache creates a new function. This means that calling cache with the same function multiple times will return different memoized functions that do not share the same cache.
  • cachedFn will also cache errors. If fn throws an error for certain arguments, it will be cached, and the same error is re-thrown when cachedFn is called with those same arguments.
  • cache is for use in Server Components only.

  Use cases

  • Cache an expensive computation
  • Share a snapshot of data
  • Preload data

• whether static rendering after data revalidation is in the background or foreground？

  I suppose that invalidateTime, invalidatePath, invalidateTag, what those APIs do is just that they send an new page route request to regenerate new version of static rendering in the background. invalidateTime has a little bit difference, it will let Next.js automatically creates a Serverless Vercel Function that can send page route request within a time interval.

  refer to Incremental Static Regeneration

  When a request is made to a page that was pre-rendered at build time, it will initially show the cached page.

  • Any requests to the page after the initial request and before 10 seconds are also cached and instantaneous.
  • After the 10-second window, the next request will still show the cached (stale) page
  • Next.js triggers a regeneration of the page in the background.
  • Once the page generates successfully, Next.js will invalidate the cache and show the updated page. If the background regeneration fails, the old page would still be unaltered.

  When a request is made to a path that hasn’t been generated, Next.js will server-render the page on the first request. Future requests will serve the static file from the cache(note: my understanding is if the route of specified static page has been marked as out-dated, even it hasn't been generated by request in the background process. then leave this work to the route request from user.)

• how is the font defined? what the format of font is?