SSG and SSR in next js

Question

Hi, I'm a nuxt developer and switched to next for a personal project. In nuxt you can specify whether the app is ssr or ssg using ssr: false option in nuxt config file.
But as I read the documentation in next docs there is no such option. If you wanted your app to be ssg you gotta use getStaticProps & getStaticPaths in routes.
I wanted to know how the ssg and ssr works in next?
Do I need to use these two function in every component?
(As I guessed) Can next builds the app both in ssr and ssg?

Fyi I'm using i18n using next-intl and app directory so the root of the app directory has a dynamic route but there won't be any api calls.
The project is a static site with no api calls.

Thank you in advance.

aardani · Accepted Answer

I wanted to know how the ssg and ssr works in next?

Next automatically determines in that speciic routes whether to use SSG or SSR.
you can still force the behavior by using Route Segment Config

Do I need to use these two function in every component?

In Pages dir, yes, In App dir, no

(As I guessed) Can next builds the app both in ssr and ssg?

Yes, you can mix and match them in a single application.
Note that you have limited option when it comes to static exports (exporting without node.js)

SSG and SSR in next js

2 Replies