trailing slash guide

Trailing Slash Guide

Punya masalah slash setelah menggunakan situs web statis dalam produksi?

Repo ini menjelaskan secara faktual perilaku:

• Generator Situs Statis
• Penyedia Hosting

Kami juga menyarankan beberapa solusi yang mungkin

Intro

Mari kita lebih terbiasa dengan masalah slash trailing.

Masalah Umum :

• Masalah SEO /Perf: Saat menjelajah /myPath , tuan rumah Anda mengarahkan kembali ke /myPath/
• 404 Masalah: Tautan relatif seperti <a href="otherPath"> diselesaikan secara berbeda ( /otherPath atau /myPath/otherPath tergantung pada ada /tidak adanya tebasan trailing
• Masalah UX: Tuan rumah Anda menambahkan tebasan trailing, dan kemudian router frontend applikasi tunggal Anda menghapusnya, mengarah ke pengalaman yang membingungkan dan berkedip-kedip URL

Penyebab :

• Generator situs statis dapat memancarkan file yang berbeda untuk jalur yang sama /myPath : /myPath.html atau /myPath/index.html (yang lebih baru dapat menyebabkan slash trailing tambahan)
• Penyedia host semuanya memiliki perilaku yang berbeda saat menyajikan file statis, tidak ada standar

Ringkasan

Mempertimbangkan situs statis ini:

static
│
├── file.html
│
├── folder
│   └── index.html
│
├── both.html
└── both
    └── index.html

Perilaku berbagai penyedia hosting statis:

Tuan rumah	Pengaturan	Url	/mengajukan	/mengajukan/	/file.html	/map	/map/	/folder/index.html	/keduanya	/keduanya/	/both.html	/both/index.html
Halaman GitHub		link	✅	? 404	✅	➡️ /folder /	✅	✅	✅	✅	✅	✅
Netlify	Default: URL cantik di	link	✅	➡️ /file	✅	➡️ /folder /	✅	✅	✅	➡️ /keduanya	✅	✅
Netlify	URL cantik	link	✅	✅	✅	✅	✅	✅	✅	✅	✅	✅
Vercel	Default: cleanUrls = false trailingslash = tidak terdefinisi	link	? 404	? 404	✅	✅	✅	✅	✅	✅	✅	✅
Vercel	cleanurls = false trailingslash = false	link	? 404	? 404	✅	✅	➡️ /folder	✅	✅	➡️ /keduanya	✅	✅
Vercel	cleanurls = false trailingslash = true	link	? 404	? 404	✅	➡️ /folder /	✅	✅	➡️ /keduanya /	✅	✅	✅
Vercel	cleanUrls = trailingslash true = tidak ditentukan	link	✅	✅	➡️ /file	✅	✅	➡️ /folder	✅	✅	➡️ /keduanya	➡️ /keduanya
Vercel	cleanurls = trailingSlash true = false	link	✅	➡️ /file	➡️ /file	✅	➡️ /folder	➡️ /folder	✅	➡️ /keduanya	➡️ /keduanya	➡️ /keduanya
Vercel	cleanUrls = trailingslash true = true	link	➡️ /file /	✅	➡️ /file /	➡️ /folder /	✅	➡️ /folder /	➡️ /keduanya /	✅	➡️ /keduanya /	➡️ /keduanya /
Halaman Cloudflare		link	✅	➡️ /file	➡️ /file	➡️ /folder /	✅	➡️ /folder /	✅	✅	➡️ /keduanya	➡️ /keduanya /
Memberikan		link	✅	✅	✅	✅	✅	✅	✅	✅	✅	✅
Aplikasi web statis biru		link	✅	➡️ /file	✅	✅	✅	✅	✅	✅	✅	✅

Bantuan yang diinginkan

Mari kita menjaga sumber daya ini tetap up-to-date, dan membuatnya lengkap bersama.