[FEAT]: Add SSR application

[brandonroberts]

Vite has built-in support for SSR https://vitejs.dev/guide/ssr.html

This application could serve as the starting point for using Analog applications with SSR, and a baseline for future support of api/server routes.

[mainawycliffe]

Will this use an express server or are there going to be a few alternatives to choose from?

[brandonroberts]

Good question. Most likely we'll start with express and see what other options are available.

Some type of NestJS integration would be interesting but not sure it's possible.

[Yberion]

I'm sure a Fastify version could be done as well.

If I understand correctly, we can already make an example app with Vite SSR using Angular Universal Engine (Common/Clover) as renderer?

If so, are you fine with the example app not being Standalone since Angular Universal doesn't support it yet?

[mainawycliffe]

@brandonroberts What do you mean by NextJS integration?

This one issue I would love to explore and see if I can pull it off, but I would need some guidance on the way to approach it.

[brandonroberts]

@mainawycliffe I was referring NestJS https://nestjs.com/

@Yberion I have a sample repo here that uses SSR without Angular Universal https://github.com/brandonroberts/analog-angular-ssr

Vite already handles the additional pieces.

[mainawycliffe]

@brandonroberts ah, that makes sense. For a moment I was like what kind of witchery are you proposing with Nextjs, would be exciting though.

[Yberion]

@Yberion I have a sample repo here that uses SSR without Angular Universal https://github.com/brandonroberts/analog-angular-ssr

Vite already handles the additional pieces.

I tried on my side with Angular Universal last week but I was missing some knowledges (selectors & renderApplication, angular.default()). Thanks for making that implementation!

Do you still require a PR for this issue (mostly copy/paste what you did) or you will do it yourself?

[mainawycliffe]

Taking a look at the repo you shared, and it looks quite nice. To do SSR, we would need to load the individual route and get component details from it and do SSR, am I right?

[brandonroberts]

@Yberion its not complete. It doesn't handle serving a production build. It just shows that it works.

@mainawycliffe Yes, if you have the routing setup with the Angular Router it should just SSR the app similar to how universal does it.

Long term this would be integrated inside the plugin itself. We could add some docs on using this as is today with an existing setup

[mainawycliffe]

I am just mentally modeling how the plugin would work; with analog and maybe express or nestjs, we would automatically check the route being accessed in the routes directly and SSR the page. The tricky part I can think of is to fallback to CSR so that it behaves like a SPA after the first load (maybe I am thinking to far ahead) and lazy loads the routes just like a normal angular application, but we could generate a server bundle and client bundle to work around this.

Next.js has a Link component that enables this behavior for CSR, we could follow a similar path.

[yackinn]

I'm interested in creating an implementation with NestJS. It could be similar to this https://github.com/nxarch/nest-nguniversal.

What are these middlewares used for?

app.use(vite.middlewares);