JS Nation

JSNation 2023

Today's workshop focused on creating a website using SvelteKit and Storyblock CMS. It covered topics such as installing SvelteKit and integrating Storyblock, configuring SSL for localhost, connecting Storyblock SDK with a space, retrieving data and setting up preprocess, creating components and styling with Tailwind, compiling components and troubleshooting, creating dynamic pages and adding fields to the schema, working with the image service, and deploying and internationalization. The workshop also touched on advanced topics like multilingual support and emphasized the importance of being familiar with a good CMS and framework for job opportunities.

This SvelteKit workshop explores the integration of 3rd party services, such as Storyblok, in a SvelteKit project. Participants will learn how to create a SvelteKit project, leverage Svelte components, and connect to external APIs. The workshop covers important concepts including SSR, CSR, static site generation, and deploying the application using adapters. By the end of the workshop, attendees will have a solid understanding of building SvelteKit applications with API integrations and be prepared for deployment.

Developing Dynamic Blogs with SvelteKit & Storyblok: A Hands-on Workshop

Alba Silvente Fuentes

Roberto Butti

React Summit

React Summit 2023

This Talk introduces server components in React, which provide an intermediate format for rendering and offer advantages for both client-side and server-side rendering. Server components reduce bundle size on the client and improve search engine optimization. They abstract the rendering process, allowing for faster rendering and flexibility in choosing where to render components. While server components are still in the experimental stage, Next.js is a good starting point to try them out.

Server components, introduced in React v18 end these shortcomings, enabling rendering React components fully on the server, into an intermediate abstraction format without needing to add to the JavaScript bundle. This talk aims to cover the following points:1. A fun story of how we needed CSR and how SSR started to take its place2. What are server components and what benefits did they bring like 0 javascript bundle size3. Demo of a simple app using client-side rendering, SSR, and server components and analyzing the performance gains and understanding when to use what4. My take on how rendering UI will change with this approach

Server Components: The Epic Tale of Rendering UX

Nikhil Sharma

React Advanced

React Advanced 2023

This Talk discusses the journey of data fetching libraries in React's new streaming SSL, focusing on the use of suspense for data fetching. It covers the backstory of suspense and data fetching, the plan and green light for its implementation, challenges with Next.js app router and SSR, data transport and flushing timing, the importance of timing and data transport, delayed rehydration and stream closure, the need for remaining data and required functionalities, challenges faced by vanilla React users, and audience questions about React server components.

If you use the Next.js app directory, you might not even have noticed it, but you are not only using React Server Components, but you are also using the new streaming SSR feature of React.That means that on first page load, your Client Components will now be server-side rendered, suspense boundary by suspense boundary, and constantly streamed to the client, where they are rehydrated piece-by-piece. If you combine that with suspense for data fetching in your client components, you will suddenly be facing hydration mismatches - as your client components will start fetching data on the server, but the data will not be transported to the client. In this talk, I will go over the rocky journey that we had to go through to support suspense for data fetching in Streaming SSR with Apollo Client, looking at all the curious timing problems that come up with these technologies, and how we try to solve them as best as we can - always with the best possible user and developer experience in mind.

The Rocky Journey of Data Fetching Libraries in React’s New Streaming SSR

Lenz Weber-Tronic

Vue.js Live Conference

Vue.js London 2023

Google processes billions of searches per day, but less than 10% of websites get visitors from Google. SEO is user-focused and requires continuous improvement. JavaScript used to be a challenge for search engines, but now they can handle it. Server-side rendering is a solution for the challenges of single-page applications. Good SEO includes HTTPS, mobile friendliness, core web vitals, and handling URL changes. Meta tags and accessibility are important for SEO. Google Search Console provides valuable insights for tracking keyword performance.

In the world of Single Page Applications, client-side rendering has long been the go-to method for rendering content. However, as SPAs have evolved, other rendering modes have emerged that offer different advantages and disadvantages. In my talk, we will explore why it's important to go beyond a blank page as initial request and explore different rendering modes like SSR, SSG, ISG and more. We'll not only cover the pros and cons of each mode but also provide real and comparable examples. By the end of the talk, you'll have a better understanding of the different rendering modes available for SPAs, and be able to choose the best one for your needs. Join my talk to explore the art of rendering modes.

The Art of Rendering Modes: Go Beyond a Blank Page

Alexander Lichter

React Advanced 2022

Shivai Lamba presents server-side rendering using WebAssembly. Learn how to enable server-side rendering with WebAssembly using a Create React app. See the changes in the app before and after enabling server-side rendering. Support for React 18 and the ability to create streaming applications using WebAssembly. Connect with me on Twitter at TheCloudWeb for more information on WebAssembly.

This talk shares how to achieve Server-side rendering using WebAssembly and WASMEdge which is a WebAssembly Runtime. The talk also covers the benefits of using WebAssembly to achieve Server Side Rendering. The talk will also cover a demo on how to launch a React application using the WasmEdge runtime.

Server-Side Rendering Using WebAssembly

Shivay Lamba

React Summit 2022

Liad Yosef discusses the importance and evolution of server-side rendering, highlighting its benefits such as improved performance and SEO. He explores different rendering strategies and the challenges of hydration in React. He introduces SuspenseSSL in React 18 as a solution for fetching data in advance and selectively hydrating components. He also mentions React Server Component as a game changer for reducing bundle size in rendering with React.

With React Server Components and React’s new suspense SSR capabilities, we get an paradigm shift in the world of client/server side rendering. The pendulum that started in plain HTML pages, quickly swinged to all-client-rendering, is now returning to the server side. Emerging frameworks like Next.js and Remix usher a new era of web development, one where SSR is a first class citizen. In this talk we deep dive into those React features, talk about the state of the art practices regarding server rendering, and maybe get a glimpse into the exciting future of front-back-full-stack relationships.

Dear Client, I'm Leaving You

Liad Yosef

The Talk discusses the challenges of handling DOM manipulation with JavaScript and the performance issues that arise from using SPAs. It explores the solution of server-side rendering (SSR) to address SEO concerns but notes that bundle size remains an issue. Code splitting is introduced as a way to load content dynamically, but it presents challenges for SSR. The speaker suggests a solution using vanilla.js that solves the problem without scalability issues.

Code splitting is a way to optimize the performance of our app by shipping less code to the end users. The most common form of code splitting is to use dynamic imports after a user interaction. In our case, we’re going to talk about conditionally loading only the parts of the application that we need during server side rendering. We’re going to discuss the problems and the solutions, so you could try it out in your own project.

The Only Way to Eat an Elephant - Code Splitting With Server Side Rendering

Lena Zhukova

React Advanced 2021

Gatsby V4 introduces deferred static generation (DSG), combining the benefits of static site generation (SSG) and server-side rendering (SSR). This approach allows for faster builds and a more deterministic cache. Gatsby V4 also includes features such as parallel query running and LMDB for enhanced performance. The focus is on integrations and improving the developer experience (DX) in the future.

Gats v4 now has SSR and a new rendering mode called DSG. Between SSG, SSR, DSG, ISR and DPR, the Jamstack has recently seen a flurry of new rendering modes that work for every use case that seemed unviable in the past. But knowing what to pick for your site or a portion of your site and what each of these really do under the hood is confusing and easy to do incorrectly.This track will clear the confusion and dive deep into each of these, discuss nuances and even peek under the hood to see how they work and what scalability and consistency promises they offer and which promises they keep. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Gatsby v4's New Rendering Modes 

Sid Chatterjee

React Finland

React Finland 2021

In this talk we are going to have a look on how to use Server-Side-Rendering and Static-Site-Generation in NextJS to serve pages. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

SSR & SSG in NextJS

Nur Şah Ketene

React Summit Remote Edition

React Summit Remote Edition 2021

Today's Talk discussed the impact of Core Web Vitals on SEO and website performance. Strategies for improving Core Web Vitals include using Next.js, optimizing images and fonts, and measuring performance with tools like Google Lighthouse. The hybrid approach of Next.js allows for flexibility in rendering applications. Recent releases of Next.js have focused on performance improvements. Next.js Commerce offers an all-in-one starter kit for e-commerce. Vercel provides a tool for measuring real user experiences and identifying potential causes of performance issues.

#ssr