What is Next.js and why did we use it for a landslide risk application?
Next.js is a framework that enables web-based applications to include fast-loading functionalities like server-side rendering and static pre-rendering. We recently made the technical decision to use Next.js when building a decision-support tool for conveying landslide risk to Sitka, Alaska. In Sitka, Alaska, landslides represent one of the most harrowing effects of climate change. In 2015, Sitka experienced a series of fatal landslides which ignited local and national action to address how to best keep communities safe and informed.
In order for the landslide risk application to be effective in every scenario, the information and resources it generates must be fully available to all Sitkans – regardless of their cell phone signal or other environmental factors. During the application’s discovery phase, this accessibility remained a priority. Due to the remote nature of the region, we worked to discern a method to send users application information in a small “packet” to make it more likely that they will be able to successfully receive updates.
React vs. Next.js and the argument for static HTML export
We aimed to build a static site for Sitka where all data could be stored on a simple server without worrying about databases or other moving parts. We wanted to build an effective, fast application using a single HTML file that includes all content and CSS needed to view the page.
In most of our applications, we use React. However, in order to avoid sending a large chunk of javascript to the client, we needed to find an alternative. Next.js allows you to pre-render all or part of a site so you only send the information necessary to display each page. This means the user can view the content sooner, because only a few small files need to be downloaded and the browser doesn’t have to do any extra processing to display the page, so the page takes less time to load.
Pre-rendering charts and loading data
Typically, when we use D3 to create a chart, we first load the data and the D3 library client-side and then render the chart once the information is ready. To make this process more efficient, we pre-render the charts like we do with other, similar, content on the page. This means the SVG for the chart is sent in the initial HTML file and can be viewed before any javascript loads. In the case of our Sitka landslide application, this means that risk indicators are loaded in less time with fewer dependencies.
Injecting critical CSS
Critical CSS is the style information needed for content “above the fold” on the site. By injecting Critical CSS into the HTML, Next.js pre-rendering is able to ensure that the page has the CSS it needs to format the page without depending on a separate dependency. This capability of automatically inlining Critical CSS is unique to Next.js and vital to the success of our landslide application.
Outcome
Upon hearing the needs of the Sitka community, we knew that we needed to carefully consider our options in building a fast, informative landslide risk application. With Next.js, we were able to quickly send users the web application in a small package of information without having to load javascript dependencies.
This library is crucial for a web-based tool that needs to deliver information in time-sensitive situations. Although in this scenario Next.js was a good fit due to the remote location of the users, this tool is a good choice in any situation where fast load times are paramount. To connect with our team about how we can generate a comprehensive and responsive application to fit your organization’s needs, contact us here.