saltyshiomix / nextron

⚡ Next.js + Electron ⚡
https://npm.im/nextron
MIT License
3.91k stars 225 forks source link

Question: How does Electron concepts map NextJs ones ? #92

Open alfonsodev opened 4 years ago

alfonsodev commented 4 years ago

Hi, thanks for making nextron possible!.
I wonder if it would be useful to add some specific documentation on how both Electron and NextJS map to each other, or overlap in Nextron.
From a beginner's perspective, it's a bit tricky to fully grasp how both platforms combine.
For example in NextsJS we have:

And in Electron we have:

My guess is that both build time and request time (getServerSideProps and getStaticProps) run in the main process, nodejs side, while the render process is equivalent to client side in Nextjs, so that the render process runs the code after Nextjs's code elimination.

Sorry if all this is too obvious, just want to verify I'm getting it correctly and perhaps I could contribute with documentation for begginers.

Additionally is there any other main core concept mapping that is useful to consider?
Thanks!

danikaze commented 4 years ago

As far as I understand, and trying to answer in a very simple way (we can go more deep and deep into this):

Electron is basically an encapsulation of a Chrome browser to serve web apps in a native way from the desktop, providing some APIs to connect with the OS (such as file access, menu, shortcuts, etc.). It still needs to serve a website which is basically done by the renderer process. The renderer process takes the responsibility for both the server side rendering and the client side rendering. The main process is the one performing those operations in the background to connect with the OS.

NextJS role takes part in the renderer process basically... it provides the first render of the page (like php or java would do, but using React) -- that's the server side rendering part, and then hydrates the page in React providing the client side functionality. You can do this as well without NextJs of course, but using NextJs allows you to use the advantages of this framework for dynamic navigation, cached page generation, etc.

As said... I tried to answer in the most simple way, so if anyone wants to complement this answer (or correct it) it's welcomed :)