Pages

Pages - 图2info

Unlike Next.js, you can have many

pages/ folders nested inside app/. This way pages can be organized neatly, especially for larger projects.

In Blitz, a page is a

React Component exported from a .js, .jsx, .ts, or .tsx file in a pages directory. Each page is associated with a route based on its file name.

All of the following are valid pages:

  • app/pages/about.tsx
  • app/projects/pages/projects/index.tsx
  • app/tasks/pages/projects/[projectId]/tasks/[taskId].tsx

Example: If you create

app/pages/about.js that exports a React component like below, it will be accessible at /about.

  1. function About() {  return <div>About</div>}export default About

Pages with Dynamic Routes

Blitz supports pages with dynamic routes. For example, if you create a file called

app/pages/posts/[id].js, then it will be accessible at posts/1, posts/2, etc.

To learn more about routing, check the

Routing documentation.

Automatic Static Optimization

By default, Blitz pre-renders the static HTML for every page unless you explicitly opt-in to server-side rendering.

For pages with dynamic data, the page’s loading state will be pre-rendered.

Static Page Generation for Unauthenticated Pages

For pages accessible by anyone without authentication, we recommend using

getStaticProps so the page, along with it’s data, is 100% statically generated during pre-rendering (like Gatsby). Then the entire static page can be cached on a CDN. This is perfect for public pages like blog posts.

There are two methods for use with static generation, and you’ll often use both together.

  1. getStaticProps - To load the data for your page. See the getStaticProps documentation for more details.
  2. getStaticPaths - To load the possible paths for your page. See the getStaticPaths documentation for more details.

Server-side Rendering

Also referred to as “SSR” or “Dynamic Rendering”.

If a page uses Server-side Rendering, the page HTML is generated on each request.

To use Server-side Rendering for a page, you need to

export an async function called getServerSideProps. This function will be called by the server on every request.

See the

getServerSideProps documentation for more details.