Should I render server side or client side?

When deciding where to write a new piece of functionality, how do I know where to implement it?

Should it be server side (phoenix/rails templates) or should it be client side (react)?

The default for our projects should be server side rendered (HTML in phoenix or rails templates.)

Pulling in a library like React should happen only when the functionality is sufficiently interactive, see below for examples.

As little as possible should live inside the client side code.

Reasoning

We default to server side rendering because it is a tried and true method of displaying data in a browser. Rendering server side results in less moving parts and less bugs.

Testing of server side applications is more robust, easier to integration test, and better testing prevents future regressions.

We have not had good experiences in the past working with SPAs, and starting with something we are good at and know the majority of us can knock out of the park (and easily maintain) is what we're aiming for. A robust foundation with future room for dynamic components is a better starting place.

Pivoting down the road to a SPA or more react-ful site is always something we can do.

Examples

When to use server templates

• Static data - Just displays what is in the database with simple filtering/sorting
• "The web as a document" - Simple CRUD setups
• Most forms - Post/Put updates, file storage, etc, these mechanisms are well understood and optimized for server side handling
• Simple sites - Admin panels, request and response flows

When to move client side

• Websockets are involved - Dynamic content to manage, with live updates
• Wizards / multi page forms
• Dynamic forms, e.g. "Add a new section" that creates a nested record