Data integration

Ontario.ca Frontend makes it simple to build static web applications. However, when it comes to making your application dynamic and interactive for your users, you may want to do so using data from another system.

With a Jamstack architecture, you can use data from different sources to enhance your application in different ways, from retrieving information in real time to authenticating users or managing forms.

Bringing data into your project

There are two main ways of integrating data in your application: during the build process, when your site is being generated, or on the client, when you want to access dynamic content from the browser.

Fetching data in the build process

Each time you create a build of your application, you can fetch data and use it to dynamically generate pages based on that data. This is particularly useful when dealing with a large dataset or when creating a content-rich site.

You can use layout templates to dynamically generate pages based on fetched data, and loop through that data to create individual pages or components. You can also paginate your data to break down large datasets into manageable chunks, optimizing performance and providing a better user experience.

Fetching data on the client

You can use client-side JavaScript to enhance the interactivity of the pages you generate for your application and make them dynamic. This will allow you to fetch additional data from APIs from your user's web browser, allowing your application to make real-time updates without needing a full page reload.

Sources of data

Most of the time, the data that you use in your application (whether at build time or via client-side JavaScript) will come from the APIs of the different backing services that your application uses. This might include data from a headless content management system, a SaaS provider, or even custom APIs managed by your team. This data will typically arrive in your application as JSON or XML.

However, you can also use data files stored locally in your project to provide static data to your application. These could be JSON or Markdown files, or even CSV files, which are useful for working with tabular data. Working with local files is a great way to bootstrap a new Ontario.ca Frontend project, especially if your backing services are unavailable or you want to work with test data without the complexity of querying an external API.