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.

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.

Idea for improving this page?Edit it on GitHub
Bytes Newsletter