DEV Community

yanir manor
yanir manor

Posted on

NEXTJS 12 - Server component

Next 12 was released last October.
The first thing that catches my eyes and gets me curious is SWC the new rust compiler that will give faster refresh and build.
Compilation using Rust needs to be 17x faster than Babel.
Also, the server component looks promising.
Let's take the new version for a ride 🚴🏼‍♂️.
Link: https://github.com/yanirmanor/next12-server-components

Lets create new next js 12 application

npx create-next-app@latest

Then change to configuration

// next.config.js
module.exports = {
  swcMinify: true
}
Enter fullscreen mode Exit fullscreen mode

That it. Now you can enjoy the power of SWC.

Let's add Tailwindcss for nice and fast CSS power.
We will use Tailwindcss with JIT mode.

Here are the advantages that JIT offers:

  • Lightning-fast build times
  • Every variant is enabled out of the box
  • Generate arbitrary styles without writing custom CSS (top[-10px])
  • Identical CSS in development and production
  • Better browser performance in development

First, we will need to install and init.

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest @tailwindcss/jit
npx tailwindcss init -p
Enter fullscreen mode Exit fullscreen mode

Then we need to add mode JIT.

// tailwind.config.js
module.exports = {
 mode: "jit",
 purge: ["./src/**/*.{js,jsx,ts,tsx}"],
 darkMode: false, // or 'media' or 'class'
 theme: {
  extend: {},
 },
 variants: {
  extend: {},
 },
 plugins: [],
};
Enter fullscreen mode Exit fullscreen mode

And import to the global css file.

//global.css
@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

And for hot refreshing add this to .env file

TAILWIND_MODE=watch

That's it and you are ready to use Tailwind
For more information and examples you can check in
https://tailwindcss.com/

Finally, we will take a look at react server component.
First, we need to upgrade for the alpha version of react 18.

npm install react@alpha react-dom@alpha

We need to add this 2 flag in the config file.

// next.config.js
module.exports = {
  experimental: {
    concurrentFeatures: true,
    serverComponents: true
  }
}
Enter fullscreen mode Exit fullscreen mode

if you already have customized pages/_document component, you need to remove the getInitialProps static method and the getServerSideProps export if there’s any, otherwise, it won't work with server components.

To run a component on the server, append .server.js to the end of the filename. For example ./pages/demo.server.js is a Server Component.
For client components, add .client.js. For example, ./components/info.client.js.
You can then import other server or client components from any server component.

The server components will always be server-side rendered and streamed to the client, and will not be included by the client runtime.
You will need to wrap the server component with Suspense.

Conclusion

I love the new compiler, this is a good staff for nextjs for the development user experience.
for the server component, I don't feel it's ready its have some bugs.
I found some issues with using the fetch from the new react-fetch npm module.
It's also is very hard to find information and examples.
What I love and why I think it will rock -
Direct option running SQL from the server component
No client-server waterfall of API calls
more secure.
I love the flexibility that it gives, but I think a developer will need to think about when and what will be on the server and what is good to stay on the client. still, it was fun.

Top comments (1)

Collapse
 
maher_naija_b432e8e4557cc profile image
maher naija

i have made this boilerplate that aggregates all github boilerplates: github.com/maher-naija-pro/Best-Ne...