Architecture in 2020

[Manubi]

Hi to everyone,

I am trying to build an app with a couple of static marketing/information pages and a closed membership part like a dynamic dashboard page.

My first try was to build it with next.js and firebase for authentication and apollo client for fetching data from the hasura graphql backend.

Problems I encountered so far:

GraphQL: I am using apollo/react-hooks and I basically copied the next.js with apollo example in order to flexibly decide which page is static (no external data) and can be delivered via CDN and which page is dynamic and ServerSideRendered. Was working fine till I needed authentication.

Authentication: If i use Firebase for authentication I need to use a custom server with next.js in order to get the firebase.admin.auth running on the next.js server. The problem with that solution is automatically all my sites will become ServerSideRendered and I miss completely out on the CDN serving option. Which brings me to the serverless solution. I guess I need to use the serverless approach and copy the example as nextjs firebase serverless here in order to still be able to use all the benefits of nextjs (static via CDN and dynamic)?

I am basically looking for the "best" approach to build a site which uses marketing (static) sites and a dashboard (dynamic part). I want to have a solution that's able to scale and is fast and can be later also used with mobile apps. All of the users will be in central Europe.

How would you build it with a javascript stack?

I've seen from another discussion that the zeit.co dashboard is working as:
https://github.com/zeit/next.js/discussions/10724#discussioncomment-720

Uses https://github.com/zeit/swr to ensure data is up-to-date while staying fast
All pages are auto-exported to static HTML, no getInitialProps on any pages
All pages implement a loading shell, an example of this is: https://zeit.co/dashboard/abcdefgh
When a user opens the page a fetch is done against the API, if you're logged in they have a cookie set already, if not you're redirected to the login screen

Is there an example for that approach as it sounds really interesting to me?

I am also open to the new /api routes in next.js and ditch hasura. But the routes only work with rest and sooner or later there might be the request to add mobile apps. That's the reason why I think it might be better/faster to do it with graphql/hasura? Or I just could go with the next.js routes api and add different endpoints for mobile like /api/mobile and write the resolvers again? Also authentication with firebase is not a must. What are you using and how happy are you? Many questions....

Thanks for your help!!!

[waptik]

Hi to everyone,

I am trying to build an app with a couple of static marketing/information pages and a closed membership part like a dynamic dashboard page.

My first try was to build it with next.js and firebase for authentication and apollo client for fetching data from the hasura graphql backend.

Problems I encountered so far:

GraphQL: I am using apollo/react-hooks and I basically copied the next.js with apollo example in order to flexibly decide which page is static (no external data) and can be delivered via CDN and which page is dynamic and ServerSideRendered. Was working fine till I needed authentication.

Authentication: If i use Firebase for authentication I need to use a custom server with next.js in order to get the firebase.admin.auth running on the next.js server. The problem with that solution is automatically all my sites will become ServerSideRendered and I miss completely out on the CDN serving option. Which brings me to the serverless solution. I guess I need to use the serverless approach and copy the example as nextjs firebase serverless here in order to still be able to use all the benefits of nextjs (static via CDN and dynamic)?

I am basically looking for the "best" approach to build a site which uses marketing (static) sites and a dashboard (dynamic part). I want to have a solution that's able to scale and is fast and can be later also used with mobile apps. All of the users will be in central Europe.

How would you build it with a javascript stack?

I've seen from another discussion that the zeit.co dashboard is working as:
https://github.com/zeit/next.js/discussions/10724#discussioncomment-720

Uses https://github.com/zeit/swr to ensure data is up-to-date while staying fast
All pages are auto-exported to static HTML, no getInitialProps on any pages
All pages implement a loading shell, an example of this is: https://zeit.co/dashboard/abcdefgh
When a user opens the page a fetch is done against the API, if you're logged in they have a cookie set already, if not you're redirected to the login screen

Is there an example for that approach as it sounds really interesting to me?

I am also open to the new /api routes in next.js and ditch hasura. But the routes only work with rest and sooner or later there might be the request to add mobile apps. That's the reason why I think it might be better/faster to do it with graphql/hasura? Or I just could go with the next.js routes api and add different endpoints for mobile like /api/mobile and write the resolvers again? Also authentication with firebase is not a must. What are you using and how happy are you? Many questions....

Thanks for your help!!!

Check Divjoy-next-firebase-auth out for firebase auth or you could take a look at Nextjs auth0 or Nextjs hasura auth0 for authentication

[ziiw]

@Manubi I'm working on a similar project (static + dashboard). I've been using the nextjs firebase serverless flow, but as you mentionned we are loosing static rendering.

Do you have any updates on your project ?
Cheers

[Manubi]

We kind of found a way we are quite happy now.
Use the latest version of next.js which gives you SSG.

For authentication we still use getInitialProps because no real other solution is in the next example repo afik. If you use getInitialProps the page will be server side rendered. So we are basically wrapping every site that needs authentication with an Authentication-HOC (no wrapping of the whole app in _app.js) and use getInitalProps to get the data on the server. With that you can decide which page is static and which is SSR.

For the static sites you can now use getStaticPaths and getStaticProps if you need static data for these pages.

[ziiw]

Instead of hydrating the whole app with AuthUser props, I will do as you said, per page. Thanks for the answer !