Search code examples
angularangular17-ssr

Why does the application render on the server side but the components are on the client?


My folder structure I don't understand why the rendering is on the server side but the components are placed on the client because after building I see the components are in the browser folder. am I making a mistake here?

I tried turning off javascript to check if the components are being rendered on the server side, the result is that after turning off js, the website is still displayed, which means the website is still rendered on the server side.


Solution

  • The answer is that when you create a Project and select the SSR option in Angular 17 (because I am using and testing on Angular 17), by default the Project will turn on Prerender mode (SSG) and components will be rendered when building and placed on the right side. Client (browser folder). I tried creating a few different components and placing the Platform check function in ngOninit + Disable JS to test, but found that these components were not rendered on the Server side. The solution to render server-side components is to turn off prerender by going to the angular.json file, at the path “projects”.“project_name”.“architect”.“build”.“options” to find the key “prerender” and set to false. So all components will be rendered on the server side.

    To find out, just search "prerender" or "SSG". There is very little documentation about Angular SSR online, you have to search patiently to get the answer :heart: (by Google Translate)