Browsers require HTML to display page content. Server-side rendering and client-side rendering are two ways a browser can get rendered HTML content for a page. This topic goes over these two ways of rendering content supported by PWA Studio and UPWARD.
Server-side rendering (SSR)
Server-side rendering (SSR) is a method of providing pre-generated HTML as a response to an HTTP request.
For example, the content of this website is pre-built from source files. These files are converted into HTML pages and uploaded into an HTTP hosting server. When a user visits the site, the server returns the pre-built HTML file for the browser to render.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <link rel="shortcut icon" href="/favicon.ico"> <title>My Website</title> </head> <body> <header>Header content</header> <menu>Menu content</menu> <main>Main body content</main> <footer>Footer content</footer> </body> </html>
Server-side languages, such as PHP and Java, can also render custom HTML per request to make the experience more dynamic. This is how Magento currently works.
Client-side rendering (CSR)
The following is an example of what a bare page response looks like:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <link rel="shortcut icon" href="/favicon.ico"> <title>My Web App</title> </head> <body> <div id="root"></div> <script src="/app.js"></script> </body> </html>
In this example, the
app.js script runs after the page loads.
A common behavior for this type of file is to generate an HTML DOM tree and insert it into a root element on the page.
This pattern is often used for single page applications such as a PWA Storefront.
Content rendering and Search Engine Optimization (SEO)
When and how page content renders is an important part of Search Engine Optimization (SEO).
Boosting a site’s SEO while providing a rich, dynamic experience is a balancing act between server-side rendering and client-side rendering.
Content rendering in PWA Studio
UPWARD and server-side rendering
Use the following resolvers in your applications UPWARD configuration file to enable server-side rendering.
The FileResolver configuration lets you use the contents of a static file in your response body. You can pre-build static HTML files for your application and map URL to the content using the FileResolver. This is the fastest way to deliver a server-side rendered HTML response to a request.
The TemplateResolver configuration lets you use templates to create a server-side rendered response. Templates are more flexible than pre-built static HTML files because they let you use template variables to create the final HTML response. Server-side rendering performance with the TemplateResolver is dependent on the complexity of the templates it uses.
Venia content rendering process
Venia uses both server-side and client-side rendering to display page content.
The following is the sequence of events that occur when a browser requests a page from the Venia storefront:
- The application’s UPWARD server receives the request and checks to see if it is a valid page request.
- If the request is for a page, the UPWARD server returns a pre-built, server-side rendered HTML response that contains the PWA application shell.