New Tech Forum
By Ben Vinegar, InfoWorld |
Emerging tech dissected by technologists
React-based frameworks that render web pages on the server could paradoxically be the future of front-end development. Here’s why.
At Sentry, we look at both industry metrics and our own internal SDK adoption data to decide which frameworks to invest in. And with 3.5 million developers and 85 thousand organizations across 150 countries sending us ~800 billion errors and transactions each month, we have a lot of data telling us what developers want.
In this article, we draw on this data to identify some interesting trends about where front-end frameworks are headed, and why we think React-based frameworks like Next.js—frameworks that make it easy to render web pages on the server—could paradoxically be the future of front-end development.
‘Plain’ React leads… for now
React makes it fast and relatively easy to create dynamic UIs, leaving manual DOM manipulation out of sight and out of mind. While React developers may not spend much time debugging issues from React’s underlying library, errors still happen. And since Sentry tells its users the “when, what, and why” behind application errors, we can measure how often React-based project errors happen.
SSR-capable frameworks like Next.js, which sits on top of React, allow developers to write React like they are used to, but the framework assists in both initially rendering that content on the server, and in “rehydrating” parts of the client UI once it's loaded in the browser.
This is a big deal for two reasons. First, it means front-end developers are now owning a part of the back-end stack — they have a deployed service that needs to be monitored and maintained. Second, it splits front-end developers in two — one group focuses on the front end of the front end (think CSS and accessibility), while the other group focuses on the back end of the front end (data fetching, API design, and information architecture).
Bringing it back to the end user, server-side rendering offers a major benefit over client-side rendering (CSR) frameworks: delivering ready-to-go content to the browser, faster. And when we all have goldfish-level attention spans, waiting a half-second longer as a page loads can be the difference between users abandoning their cart and checking out. It’s worth noting that SSR can also help with SEO, but first, let’s focus on speed.
SSR leads to a faster web
Server-side rendering with Next.js is great to improve the perceived performance of your application but beware of the cost of hydration on your JS thread. Your page can feel fast, but take more time to actually be usable by the user.
– Ben Zohar, Sr. Software Engineer, Arcade
How do we know that developers using SSR care about speed? Consider that Sentry users can monitor application performance by sending transaction data to Sentry. We reasonably expect that if Sentry users building apps with SSR frameworks care about performance, we’ll see more activity from those projects.
The graph at the left shows what % of organizations (aka Sentry accounts) with a principally CSR or SSR project installed are monitoring performance (aka sending transactions to Sentry). For CSR frameworks we included the usual suspects: React, Vue, Ember, and Angular. For the SSR category, we included Svelte, Remix, and Next.js. With 91% of SSR projects monitoring performance and 81% of CSR projects monitoring performance, it’s not a stretch to say that developers using SSR-capable frameworks are paying more attention to the performance of their applications.
At Sentry, fan-favorite Next.js — which has a large focus on SSR — is rapidly emerging as the second most popular front-end framework behind traditional React CSR apps. This comes as no surprise given the framework’s focus on performance and developer experience. This focus on performance is probably why we’ve seen the number of Next.js projects grow a whopping 240% year over year at Sentry.
Optimizing for SEO
Because Google wants to send users to pages that load fast (aka no spinning beachballs), faster-loading pages rank higher in organic search results. Improved page load speed is a big SEO advantage for SSR frameworks, but there’s more than page load speed that makes SSR better than CSR for SEO.
We ultimately decided that server-side rendering best set up a codebase for SEO success; and selected Next.js as the framework to facilitate it.(Video) Learn SSR for NEXT.JS in 10 Minutes (Server Side Rendering for beginners)
– Rachel Church, Software Engineer, Airtable
Is this the end of CSR?
There isn’t a one-size-fits-all for front-end frameworks,. Since CSR and SSR solve different needs, we don’t expect to see either disappearing anytime soon. But as developers look for ways to make their apps faster, we believe frameworks that make SSR easy (like Next.js) will continue to gain traction.
As mentioned above, SSR offers speed and SEO benefits that CSR (in most scenarios) can’t match. But SSR is not for everyone. For teams who want to build dynamic content fast, CSR frameworks are generally easier to use. Another reason is cost. CSR offloads computing power to the end user, while SSR requires you to pay for the computing. This could mean a steep bill from your cloud service provider if you create the next overnight web app sensation.
No matter the type of web app you are building, new web frameworks and tools are making it easier to create dynamic content. And with the ever-decreasing cost of computing power (thank you cloud service providers), the future of frameworks that make SSR easier, like Next.js, looks bright.
New Tech Forum provides a venue to explore and discuss emerging enterprise technology in unprecedented depth and breadth. The selection is subjective, based on our pick of the technologies we believe to be important and of greatest interest to InfoWorld readers. InfoWorld does not accept marketing collateral for publication and reserves the right to edit all contributed content. Send all inquiries firstname.lastname@example.org.
- Web Development
- Software Development
Copyright © 2023 IDG Communications, Inc.
How to choose a low-code development platform
How do I know if server-side rendering is working? ›
Right click anywhere on the site and select “View Source” (Some websites disable this functionality, so you may want to try another) This will redirect you to the site's full HTML document where all items inside are considered to be server-side rendered.What is the drawback of server-side rendering? ›
Server Rendering #
The Negatives of Client-Side Rendering
SSR apps offer faster initial load times and better SEO performance compared to client-side rendered apps, there are some downsides. First, every request leads to a new page being re-rendered from the server to the browser.What causes render to fail? ›
Some render systems fail due to poor weatherproofing at tops of walls, or around the opening and the base of walls, so it's important that the other systems in place are correctly installed such as wall capping, parapet, roof covering and lead work.How can I improve my server-side performance? ›
- Pick the Right Application (Instead of Default App)
- Enable Caching.
- Defragment the Database Tables.
- Optimize Your Database Settings.
- Work on DNS Query Response Time.
Server-side request forgery (also known as SSRF) is a web security vulnerability that allows an attacker to induce the server-side application to make requests to an unintended location.Is server-side faster than client-side? ›
Between the two options, server-side rendering is better for SEO than client-side rendering. This is because server-side rendering can speed up page load times, which not only improves the user experience, but can help your site rank better in Google search results.Why is my rendering taking so long? ›
One of the most popular reasons for long rendering is the low computer specification. For example, you need at least a powerful CPU unit to start 2D or 3D videos rendering. Aside from the powerful processing unit, having a decent GPU or graphics processing unit would be the key.
Is server-side rendering obsolete? ›
But then the single-page applications (SPAs) came and unseated these behemoths. Everything was handled through one URL. Server-side-rendered websites were considered obsolete, a relic of a bygone age.How can I improve my render performance? ›
- Enable Multi-Frame Rendering. ...
- Optimize RAM Reserved for Other Applications. ...
- Turn on Cache Frames When Idle. ...
- Use GPU Acceleration. ...
- Upgrade Your Graphics Card. ...
- Use Solid-State Drives. ...
- Clean up Compositions. ...
- Be Selective with Effects.
They said it takes at least around 24 hours to render 1 frame, and that there are 24 frames in a second. If you take a 100 minute movie, then it would take around 400 years to render that many frames.How do I improve client-side rendering? ›
- Pay attention to elements that are repeated.
- Defer loading components that appear below the fold or behind a click.
- Replace DOM nodes with CSS pseudo elements using :before or :after instead.
- Avoid rendering device-specific content rather than hiding it with CSS.
The Solid-state Relay (SSR) is too hot to touch. Does it have any trouble? Although when the maximum current flows in the rated range, the temperature of the SSR reaches around 80 to 100 degrees, it is not abnormal. However, pay careful attention to the heat loss.Does a SSR need a resistor? ›
Optocouplers and Solid-State Relays
When using logic drive, an input resistor is usually required to limit current through the control LED to a recommended value. The recommended operating current for most SSRs is between 1 mA and 20 mA depending upon the application.
SSRs also have environmental advantages compared to mercury contactors. Solid state relays can switch up to 120 times per second, much faster than any electromechanical relay.How do I fix rendering problems? ›
Update the Studio Cache to Fix Rendering Problems
Rebuilding Studio's cache can sometimes fix the rendering problems. Close all but one Android project. Use the File menu to select Invalidate Caches/Restart. Confirm the action when the Invalidate Caches message box appears by clicking the Invalidate and Restart button.
Use the chisel and lump hammer to cut away the bad render. Be careful not to be too enthusiastic and start lifting off the good render around the bad bits. You can also use an angle grinder, which is good for cutting out cracks for repair too. Rake out any loose pointing in the wall behind and re-point roughly.
What 3 to 5 things can impact server and application performance? ›
- The Network. Inconsistent bandwidth, variable contention and increased latency can all have significantly negative effects on application performance. ...
- Third-Party Components. ...
- Integration. ...
- Application Design. ...
- Lack of Testing. ...
- The Capability to Identify Issues. ...
- The Mobile Environment. ...
- User Behavior.
If you have lots of plugins and not a lot of RAM you will overload your server causing it to have lag spikes and/or crash. The best thing to do it limit the amount of plugins you require to run your server, as some plugins such as Survival Games can use up to 1GB of RAM.
- CPU usage.
- Disk I/O relating to database, before-image, and after-image I/O.
- Record locking.
- Memory usage.
- Database and index fragmentation.
Taking advantage of cross-site scripting (XSS) is one of the most common ways for bad actors to launch a client-side attack, since estimates show approximately 53% of web applications are affected by this vulnerability.Is server-side rendering secure? ›
Improved Data Security and Compliance
With server-side rendering, even if you call on information in relational databases or NoSQL data stores, that information never goes to the front-end and is never delivered to the client, protecting data privacy and ensuring compliance.
3 Vulnerabilities to be on the Lookout for to protect your data
- Security Misconfigurations. What is a security misconfiguration? ...
- Sensitive Data Exposure. ...
- Cross-Site Request Forgery (CSRF)
Hypertext Preprocessor (PHP) is one of the world's most popular server-side scripting language for building dynamic, data-driven Web applications.Why SSR is better than CSR? ›
The main difference between CSR and SSR is where the page is rendered. SSR renders the page on the server-side and CSR renders the page on the client-side. The client-side dynamically manages the routing without refreshing the page each time the client requests another route.Does more RAM improve rendering? ›
By having the right amount of RAM we greatly increase our ability to process and render out our comps in the turnaround time needed.
How long does it take to render a 1 minute video? ›
For example, if you are rendering a one-minute video clip for film, there will be (60 seconds per minute) X (24 frames per second) or 1440 frames per minute. If each frame takes 30 seconds to render, then you will be able to render two frames per minute, or need 720 minutes (12 hours) of render time.How long should renders take? ›
Most renders will give their first image within 30 seconds, but it may take 3/4 hours to give a clear image. Large images (greater than 5 megapixels) may need to be left overnight to become clear.When should render be replaced? ›
A typical render has a useful life of around 30 years while the external renders, however, have a shelf life just like many other finishing materials. For instance, some contemporary acrylic- or plastic-based renders should last 20 to 40 years.Will render fall off? ›
Rendering or solid plastering masonry walls usually provides a very durable substrate, however if moisture can make its way behind the render finish, it can often cause the render to begin to delaminate and come away from the brickwork.Is rendering a messy job? ›
Rendering is a messy job. Steps can be taken to prevent much of the mess made. Taping up windows. Sheeting the floor, sheeting fascia boards to say a few.How much RAM is enough for rendering? ›
RAM (system memory).
For some 3D rendering jobs, 8 GB of RAM will get the job done, but to be fully optimized, 32 GB is recommended, with a MHz rate as high as possible (ideally not less than 2.2).
If your RAM doesn't have sufficient capacity, or if it has slowed over the years, you won't be able to render things at high speed.Can you speed up rendering? ›
You can speed up you 3D rendering cycles if you start using the better processor in your PC. There are two processors in your PC – a CPU and a GPU. In most instances, GPU packs significantly more power when it comes to 3D rendering. In some cases, you render times will improve by x10.Is it OK to render overnight? ›
Rendering takes all available CPU time; you should render overnight, when the computer is not needed, or set Blender to a low priority while rendering, and work on other things (be careful with the RAM space!).What FPS should I render at? ›
To save on file size and bandwidth we recommend that you stick to the 25 fps default. Exceptions to this would be if notice a specific problem with your rendered video, such as 'juddery' playback or your source footage is filmed at 30 fps and cannot be created at 25 fps.
How can I reduce my LCP time? ›
- Deliver your images in lighter formats. ...
- Automatically compress your images. ...
- Provide real-time transformations for responsive images. ...
- Cache images and improve delivery time. ...
- Use a Content Delivery Network.
- Time to First Byte (TTFB) Time to First Byte is a client-side metric that measures the time spent connecting with the server and downloading the site's contents. ...
- CPU Idle Time. ...
- Payload. ...
- Time to Interact. ...
- Speed Index. ...
- Load Time. ...
- Time to Render.
What's a Good LCP Score. A good score means that LCP should be less or equal to 2.5 seconds. If so, the page will get the green score and pass the assessment. If LCP is between 2.5 and 4.0 s, the score “needs improvements” — you'll get an orange grade.What is the disadvantage of SSR? ›
Here are some disadvantages of server-side rendering: Increase in expenses. In order to deploy an SSR application, you'll need to pay for a server or, at the very least, a "serverless" backend, which means higher running costs.Why is SSR fast? ›
As SSR apps pre-render HTML on the server, it takes less time for the browser to load content onto the screen. However, note that while first-time visitors do experience faster initial page loads with server-side rendering, caching might change this result for returning users.Is SSR faster than SPA? ›
Using ssr:inspect to debug with breakpoints
- The page will show a link for running the SSR server, click that link.
- DevTools will open up in a new window, connected to running the SSR server.
- Add breakpoints throughout the file, and inspect.
- Create a new folder for the React app.
- Install the dependencies like Babel.
- Configure the dependencies installed and set up the packages used by the server.
- Move all the code to the client directory and create a server directory.
- Create a basic server code with express.
Using React DevTools to highlight what components rerendered
To enable it, go to "Profiler" >> click the "Cog wheel" on the right side of the top bar >> "General" tab >> Check the "Highlight updates when components render." checkbox.
To test it, you will normally open browser, making a connection to SSE channel and then wait for the push notification to receive on the browser when an event is triggered on the server. To test with multiple clients, you might open multiple browsers and do the same tests.
Can we validate server-side? ›
Server-side input validation will take whatever is sent by the client and conduct additional checks. Using server-side validation indicates that any input sent by the user (or client) cannot be trusted.What is SSR for dummies? ›
Server-side rendering (SSR) is an application's ability to convert HTML files on the server into a fully rendered HTML page for the client. The web browser submits a request for information from the server, which instantly responds by sending a fully rendered page to the client.What is the purpose of server-side? ›
Server-side programming allows developers to make use of sessions — basically, a mechanism that allows a server to store information on the current user of a site and send different responses based on that information.Why is my component rendering so many times? ›
When React component re-renders itself? There are four reasons why a component would re-render itself: state changes, parent (or children) re-renders, context changes, and hooks changes. There is also a big myth: that re-renders happen when the component's props change.Is rendering done by CPU or GPU? ›
Rendering in computer systems is carried out by either the CPU or the GPU in the system. Sometimes, in a hybrid setup, such as with software like V-Ray, both the CPU and GPU work together to create the final output. Understanding these two types of rendering will help evaluate the differences between them.What are the stages of rendering? ›
Graphics rendering: Contemporary GPUs have graphics or rendering pipelines that receive as input 3D vertices and produce as output 2D raster images. The pipeline stages include lighting and shading, clipping, projection transformation, and texturing.How do SSE events work? ›
Through this interface a client requests a particular URL in order to receive an event stream. SSE is commonly used to send message updates or continuous data streams to a browser client. In a nutshell, a server-sent event is when updates are pushed (rather than pulled, or requested) from a server to a browser.What is a server-side exploit? ›
Server-side request forgery (SSRF) is a type of computer security exploit where an attacker abuses the functionality of a server causing it to access or manipulate information in the realm of that server that would otherwise not be directly accessible to the attacker.