Server components enable you to render the entire pages on the server without messing around with API endpoints and data fetching logic. But handling the different states remains an issue for the optimal usability experience. Without handling these states the user interface feels sluggish while waiting for the server response and an error would render the entire screen useless with a white screen of death. Not ideal, but strategies to mitigate these undesirable behaviors do exist and are easy to use.

I wanted to add markdown blog to my NextJS app. Initially I feared it would be a lot of work. But it turned out to be easy when using NextJS server side components, i.e. the appDir. This is the end result:

• blog overview
• blog post

To get started I added the scaffolding for the markdown blog to the appDir:

app/
├── posts/
│   ├── [slug]
│   │   ├── head.tsx
│   │   └── page.tsx
│   ├── head.tsx
│   ├── page.tsx
│   └── utils.ts

The routing logic behind the folder structure is the same used in the pages folder. The blog will be located on /posts and each blog post on /posts/[slug]. The page file in each folder is rendered only on the server and contains the markup for the page. The head files add <title> tags and a few other relevant meta tags.