Skip to main content

React, Next.js, Joy UI and co.

Server vs. Client​

Next.js allows for server-side rendering, which is a great feature for SEO and performance. So the overall goal is to use server-side rendering as much as possible. However, there are some cases where client-side rendering was necessary for the application to work as intended.

The following pages are rendered on the server:

  • Explore
  • Library
  • Sign In (client-side code is required for the OAuth flow)

The following pages are rendered on the client:

  • Editor

State Management​

Basically those pages that require state management are rendered on the client. For state management there were two considerations:

  • Redux: The most popular state management library for React. However, it is quite complex and requires a lot of boilerplate code.
  • React Context: A built-in feature of React that allows to pass data through the component tree without having to pass props down manually at every level.

In the end, React Context was chosen for state management. It is a lot simpler than Redux and is sufficient for the needs of the application.

First, a context was created for the shader editor. This context contains all properties that will end up in the shader database. From the beginning, everything related to only displaying the shader was stored in a separate context. This way, the context for displaying the shader can be reused in the future for a lightweight shader viewer without the editor.

User Interface​

For the User Interface, Joy UI was integrated as a component library with a modern design system.