Clarification on CSR (Specifically with Apollo)

[bwesner]

Looking at the with-apollo example, we see that there is a demonstration of a "client-only" page: https://github.com/zeit/next.js/blob/canary/examples/with-apollo/pages/client-only.js

However, when I run this example locally, and put a console log before returning the "client only" page jsx, I see that the console log prints on the server, which confuses me. How can I write a page so that it is truly only rendered on the client?

[lfades]

The page is rendered in the server and then exported as HTML, the client gets static HTML instead of having to wait for JavaScript to execute and display the page.

You can more about that in Automatic Static Optimization

What client only in that example means is that the page is not Server Side Rendered, because it doesn't have getInitialProps or getServerSideProps, therefore the same prerendered HTML can be served to all users.

[bwesner]

So let's say I want this statically optimized page to be protected with auth -- how can I do that if when the page is server-side rendered, it doesn't have ctx.req?

[lfades]

You can't protect SSG pages with auth, HTML pages don't have a serverless function that runs before sending the HTML, they are static content, for those cases what you do is authenticate the user in the browser, once the JS loads and after the first render (hydration), private content can be requested after the authentication, meanwhile SSG would be used to render pregenerate HTML for public content, e.g, consider a blog, the blog posts are public so you can use SSG for them, and once the page loads, you can authenticate the user and show a sidebar with user info, allow them to like, comment, etc.

[bwesner]

That makes sense, thank you!