These integration guides are not official documentation and the Strapi Support Team will not provide assistance with them.
What Is Gridsome?
Gridsome is a Vue.js-based static site generator that follows the PRPL pattern (Push, Render, Pre-cache, Lazy Load). It generates static HTML that loads quickly and then hydrates into a Vue.js Single-Page Application.
By integrating Gridsome with Strapi, you can take advantage of pre-rendered pages at build time, making content instantly available to users and search engines. This integration boosts page load times and enhances SEO performance.
Gridsome's data layer uses GraphQL to query content from various sources, simplifying the creation of complex, data-driven websites. Vue.js developers will appreciate Gridsome's gentle learning curve, along with benefits like:
- Automatic code splitting for improved performance
- Progressive image loading and optimization
- Link prefetching for near-instant page transitions
- PWA features built-in
Gridsome is ideal for modern JAMstack applications. By decoupling the frontend from the backend, you can build secure, scalable websites that are easily deployed to CDNs around the world.
When integrating Gridsome with Strapi, content is fetched at build time to generate static pages, combining the flexibility of a CMS with the high performance of static sites.
Why Integrate Gridsome with Strapi
Integrating Gridsome with Strapi creates a powerful JAMstack architecture that separates content management from presentation.
Strapi, the leading open-source headless CMS, offers a user-friendly interface and robust API capabilities, including both RESTful and GraphQL endpoints. Strapi’s flexible content modeling, which supports custom fields in Strapi, allows you to structure data precisely as needed, making it an excellent backend for Gridsome sites.
Key Benefits:
- Performance: Gridsome generates websites that load as static HTML before hydrating into Vue.js-powered SPAs, ensuring lightning-fast page loads.
- Security: Strapi's security features like Role-Based Access Control (RBAC), API token management, and authentication reduce vulnerabilities, while the architecture's separation of concerns enhances security by minimizing attack surfaces.
- SEO: Gridsome’s static HTML pages are easily crawlable by search engines, and Strapi offers powerful SEO metadata management tools to boost visibility further.
Developer Experience:
- Efficient workflows: Strapi's API-first approach allows independent frontend and backend development, improving collaboration.
- Customization: With Strapi’s plugin system and Gridsome’s Vue.js foundation, developers can tailor the CMS and frontend to meet specific project needs.
- Hot-reloading and code-splitting: Gridsome’s developer-friendly features streamline development and enhance productivity.
This integration is perfect for developers seeking customizability and powerful API capabilities. For more insights into how Strapi compares to other CMS options, check out Strapi vs. Contentful.
Keep in touch with the latest Strapi and Gridsome updates
How to Integrate Gridsome with Strapi
System Requirements and Prerequisites
Before starting, ensure your environment has:
- Node.js version 8.0 or higher
- NPM or Yarn package manager
- Basic JavaScript and Vue.js knowledge
- Familiarity with GraphQL and RESTful APIs
Installing Gridsome CLI and Creating a New Project
Install the Gridsome CLI globally:
1yarn global add @gridsome/cli
2# OR
3npm install --global @gridsome/cli
Create a new project:
1gridsome create your-project-name
2cd your-project-name
3gridsome develop
This starts a development server at localhost:8080
.
Setting Up Strapi and Content Types
Set up Strapi and define your content types through the Strapi admin panel.
Configuring the Strapi Source Plugin
Install the source plugin:
1yarn add @gridsome/source-strapi
Configure in gridsome.config.js
:
1module.exports = {
2 siteName: 'Your Site Name',
3 plugins: [
4 {
5 use: '@gridsome/source-strapi',
6 options: {
7 apiURL: 'http://localhost:1337',
8 queryLimit: 1000,
9 contentTypes: ['article', 'category'],
10 singleTypes: ['general'],
11 // Optional: For authenticated APIs
12 // loginData: {
13 // identifier: '',
14 // password: ''
15 // }
16 },
17 },
18 ],
19}
API Configuration and Permissions
Configure API permissions in Strapi:
- Go to Settings > Roles & Permissions
- Select the 'Public' role
- Enable necessary permissions for your content types
- Save changes
Development vs. Production Deployment
For production:
1. Environment Variables: Use for sensitive information:
1GRIDSOME_API_URL=https://your-production-strapi-url.com
2. Update gridsome.config.js
:
1apiURL: process.env.GRIDSOME_API_URL,
3. CORS Configuration: Allow requests from your Gridsome domain.
4. Build Process: Set up CI/CD that rebuilds your Gridsome site when content changes.
5. Static File Hosting: Deploy to a CDN or static host for optimal performance.
Performance Optimization Strategies
Image Optimization and CDN Integration
Gridsome offers built-in image optimization that works with Strapi's media library:
- Automatic Optimization: Resize, compress, and convert images to next-gen formats.
- Lazy Loading: Images load only when entering the viewport.
- Progressive Loading: Display placeholders while the main image loads.
Use Gridsome's image component with Strapi images:
1<g-image
2 :src="course.featuredImage.url"
3 :alt="course.title"
4 width="500"
5 quality="80"
6/>
Configure Strapi to upload assets to cloud storage like AWS S3 or Cloudinary for better performance.
Efficient Data Fetching with GraphQL
Gridsome's GraphQL data layer enables precise data retrieval:
1. Static Site Generation: Content is pulled at build time, eliminating runtime API calls.
2. GraphQL Queries: Fetch only necessary data:
1query {
2 allStrapiCourse(filter: { status: { eq: "published" } }) {
3 edges {
4 node {
5 id
6 title
7 description
8 slug
9 featuredImage {
10 url
11 }
12 categories {
13 id
14 name
15 }
16 }
17 }
18 }
19}
3. Pagination and Filtering: Implement server-side pagination to avoid over-fetching.
Keep in touch with the latest Strapi and Gridsome updates
Project Example: Building a Learning Platform by Integrating Gridsome with Strapi
Here's how to use Gridsome and Strapi to build a learning platform.
Project Overview
Our learning platform features:
- Content Types in Strapi:
- Courses (title, description, featured image, instructor)
- Lessons (title, content, video URL, course reference)
- Categories (name, description)
- Instructors (name, bio, avatar)
- Gridsome Implementation:
- Course listing pages with filtering
- Course detail pages
- Video lesson player with progress tracking
- User authentication and dashboard
Key Integration Points
- Data Fetching: Gridsome fetches content at build time for near-instant page loads.
- Image Optimization: Course images are processed through Gridsome's optimization pipeline.
- Dynamic Content: User-specific data, like progress tracking, uses client-side API calls.
- Authentication: User login handled through Strapi's authentication endpoints.
Performance Optimizations
The team implemented:
- Gridsome's automatic code splitting and asset optimization
- Progressive image loading for thumbnails
- Strapi's GraphQL API to request minimal data
- Strong caching headers for static assets
Results:
- 90+ Lighthouse performance scores
- Sub-second initial page loads
- Smooth navigation between courses
Deployment Architecture
- Strapi backend on a Node.js server with PostgreSQL
- Gridsome static site on Netlify
- Media assets through a CDN
- Webhooks for content update rebuilds
Challenges and Solutions
- Content Relationships: Complex relationships require careful GraphQL queries.
Solution: Custom GraphQL fragments for efficient data fetching. - User-Specific Content: Balancing static generation with dynamic user data.
Solution: Hybrid approach using static pages for public content and client-side fetching for personalized data. - Build Times: Increasing as content grew.
Solution: Incremental builds and optimized Strapi queries.
Security Considerations
- Strict CORS policies in Strapi
- Rate limiting on APIs
- Environment variables for sensitive information
Results and Benefits
The integration delivered:
- Rapid content updates through Strapi's interface
- Excellent SEO performance
- Reduced server costs with static hosting
- Improved security posture
Strapi Open Office Hours
If you have any questions about Strapi 5 or just would like to stop by and say hi, you can join us at Strapi's Discord Open Office Hours, Monday through Friday, from 12:30 pm to 1:30 pm CST: Strapi Discord Open Office Hours.
For more details, visit the Strapi documentation and the Gridsome documentation.