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.
Copied to your clipboard1<!DOCTYPE html>2<html lang="en">3 <head>4 <meta charset="utf-8" />5 <link rel="shortcut icon" href="/favicon.ico" />6 <title>My Website</title>7 </head>8 <body>9 <header>Header content</header>10 <menu>Menu content</menu>11 <main>Main body content</main>12 <footer>Footer content</footer>13 </body>14</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 Adobe Commerce and Magento Open Source currently work.
Client-side rendering (CSR)#
The following is an example of what a bare page response looks like:
Copied to your clipboard1<!DOCTYPE html>2<html lang="en">3 <head>4 <meta charset="utf-8" />5 <link rel="shortcut icon" href="/favicon.ico" />6 <title>My Web App</title>7 </head>8 <body>9 <div id="root"></div>10 <script src="/app.js"></script>11 </body>12</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.